<template>
  <div id="app">
    <login v-if="!this.$store.state.userInfo.isLogged"></login>
    <el-container v-if="this.$store.state.userInfo.isLogged">
      <topBar></topBar><!--头部-->
      <sideBar></sideBar><!--侧边导航栏-->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import login from './components/common/login'// 引入login页面
import topBar from './components/common/topBar' // 引入顶部
import sideBar from './components/common/sideBar' // 引入侧边导航

export default {
  name: 'app',
  data () {
    return {}
  },
  components: {
    login, // login
    topBar, // 注册组件
    sideBar
  }
}
</script>

<style lang="less">
  @mainBgc: #eaeaea;/*主背景色*/
  @mainColor: #878787;/*主菜单字色*/
  @activeColor:#499fea;/*菜单选中颜色*/
  *{
    padding: 0;
    margin: 0;
  }
  li{
    list-style: none;
  }
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    padding-top: 60px;
    background-color: @mainBgc;
    min-height: 100vh;
    .myRight {
      float: right;
    }
    .myLeft {
      float: left;
    }
    .addBTN{
      position: absolute;
      right: 10px;
      top: -10px;
      color: #fff;
      font-size: 18.72px;
      line-height: 40px;
    }
  }
</style>
